<template>
  <div>
    <el-form :inline="true" :model="query">
    
        <el-form-item>
          <el-input
            v-model="query.roleName"
            placeholder="请输入身份关键字"
            :clearable="true"
          ></el-input>
           <el-input
            v-model="query.areaName"
            placeholder="请输入区域关键字"
            :clearable="true"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-row>
          <el-col :span="30">
          <el-button type="primary" @click="loadUser"
            ><i class="el-icon-search"></i
          ></el-button>
          <el-button type="success" @click="(dialog.addshow=true)"
            >添加</el-button
          >
          <el-button type="success" >导出数据</el-button>
          </el-col>
          
         </el-row>
        </el-form-item>
      </el-form>

    <el-table :data="userList" border style="width: 100%" class="box">
      <el-table-column prop="userId" label="编号" width="50"> </el-table-column>
      <el-table-column prop="userName" label="姓名" width="80">
      </el-table-column>
      <el-table-column prop="userSex" label="性别" width="80">
      </el-table-column>
      <el-table-column prop="userTel" label="电话" width="100">
      </el-table-column>
      <el-table-column prop="userImg" label="头像" width="120">
      </el-table-column>
      <el-table-column prop="userMail" label="邮件" width="180">
      </el-table-column>
      <el-table-column prop="areaName" label="负责区域" width="80">
      </el-table-column>
      <el-table-column prop="roleName" label="身份" width="100">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
           <!-- -------------   添加dialog（模态框）-------------- -->
    <el-dialog
      title="添加用户"
      :visible.sync="dialog.addshow"
      width="30%"
      height="60%"
    >
      <el-form :model="addForm">
        <el-form-item label="编号" :label-width="formLabelWidth">
          <el-input v-model="addForm.userId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="addForm.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-input v-model="addForm.userSex" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
         <el-input v-model="addForm.userTel" autocomplete="off"></el-input>
        </el-form-item>
         <el-form-item label="头像" :label-width="formLabelWidth">
         <el-input v-model="addForm.userImg" autocomplete="off"></el-input>
        </el-form-item>
         <el-form-item label="邮件" :label-width="formLabelWidth">
         <el-input v-model="addForm.userMail" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="负责区域" :label-width="formLabelWidth">
          <el-select v-model="addForm.areaId" placeholder="请选择区域">
            <el-option
              v-for="(area, index) in areaList"
              :key="index"
              :label="area.areaName"
              :value="area.areaId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="身份职位" :label-width="formLabelWidth">
          <el-select v-model="addForm.roleId" placeholder="请选择身份">
            <el-option
              v-for="(role, index) in roleList"
              :key="index"
              :label="role.roleName"
              :value="role.roleId"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.addshow = false">取 消</el-button>
        <el-button type="primary" @click="addUser">添 加</el-button>
      </div>
    </el-dialog>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialog: {
        addshow: false,
        // updateshow: false,
        
      },
      query:{
        roleName:"",
        areaName:"",
      },
      userList: [],
      areaList:[],
      roleList:[],
      addForm:{},
      formInline: {
        user: "",
        region: "",
      },
    };
  },
  methods: {
    addUser(){
console.log("1234567890")
    },

    handleClick(row) {
      console.log(row);
    },
    loadUser() {
      this.$axios.post("/user/query",this.query).then((res) => {
        this.userList = res.data.data.user;
      });
    },
    loadArea(){
      this.$axios.get("area").then((res) => {
        this.areaList = res.data.data.arealist;
      });
    },
    loadRole(){
      this.$axios.get("role").then((res) => {
        this.roleList = res.data.data.rolelist;
      });
    }
  },
  mounted() {
    this.loadUser();
  },
};
</script>
<style scoped>
.box{
  margin-top: 0%;
}

</style>
